<template>
  <div class="gray-box top-redius border-bottom-gray">
    <el-tabs>
      <el-tab-pane :label="$t('sysManagement.serviceTerms')">
        <el-tabs type="card">
          <el-tab-pane :label="this.$i18n.t('sysManagement.chineseInformation')">
            <tiny-mce
              v-model="termFormCn.content"
              ref="content"
              style="width: 1000px"
            ></tiny-mce>
          </el-tab-pane>
          <el-tab-pane label="English Information">
            <tiny-mce
              v-model="termFormEn.content"
              ref="content"
              style="width: 1000px"
            ></tiny-mce>
          </el-tab-pane>
        </el-tabs>
        <el-button style="margin-top: 10px" type="primary" @click="saveTermsSubmit">{{
            $t("crud.saveBtn")
          }}</el-button>
      </el-tab-pane>
      <el-tab-pane :label="$t('sysManagement.privacyPolicy')">
        <el-tabs type="card">
          <el-tab-pane :label="this.$i18n.t('sysManagement.chineseInformation')">
            <tiny-mce
              v-model="policyFormCn.content"
              ref="content"
              style="width: 1000px"
            ></tiny-mce>
          </el-tab-pane>
          <el-tab-pane label="English Information">
            <tiny-mce
              v-model="policyFormEn.content"
              ref="content"
              style="width: 1000px"
            ></tiny-mce>
          </el-tab-pane>
        </el-tabs>
        <el-button style="margin-top: 10px" type="primary" @click="savePolicySubmit()">{{
            $t("crud.saveBtn")
          }}</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TinyMce from '@/components/tiny-mce'

export default {
  data () {
    return {
      termFormCn: {
        content: ''
      },
      termFormEn: {
        content: ''
      },
      policyFormCn: {
        content: ''
      },
      policyFormEn: {
        content: ''
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/pconfig/info/' + 'SERVICE_TERMS_CONFIG_CN'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data) {
            this.termFormCn = data
          }
        })
        this.$http({
          url: this.$http.adornUrl('/sys/pconfig/info/' + 'SERVICE_TERMS_CONFIG_EN'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data) {
            this.termFormEn = data
          }
        })
        this.$http({
          url: this.$http.adornUrl('/sys/pconfig/info/' + 'SERVICE_POLICY_CONFIG_CN'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data) {
            this.policyFormCn = data
          }
        })
        this.$http({
          url: this.$http.adornUrl('/sys/pconfig/info/' + 'SERVICE_POLICY_CONFIG_EN'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data) {
            this.policyFormEn = data
          }
        })
      })
    },
    saveTermsSubmit () {
      this.$http({
        url: this.$http.adornUrl('/sys/pconfig/save'),
        method: 'post',
        data: this.$http.adornData({
          'paramKey': 'SERVICE_TERMS_CONFIG_EN',
          'paramValue': JSON.stringify(this.termFormEn),
          'remark': this.$t('sysManagement.serviceTermsEnConfig')
        })
      })
      this.$http({
        url: this.$http.adornUrl('/sys/pconfig/save'),
        method: 'post',
        data: this.$http.adornData({
          'paramKey': 'SERVICE_TERMS_CONFIG_CN',
          'paramValue': JSON.stringify(this.termFormCn),
          'remark': this.$t('sysManagement.serviceTermsCnConfig')
        })
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 1500
        })
      })
    },
    savePolicySubmit () {
      this.$http({
        url: this.$http.adornUrl('/sys/pconfig/save'),
        method: 'post',
        data: this.$http.adornData({
          'paramKey': 'SERVICE_POLICY_CONFIG_EN',
          'paramValue': JSON.stringify(this.policyFormEn),
          'remark': this.$t('sysManagement.privacyPolicyEnConfig')
        })
      })
      this.$http({
        url: this.$http.adornUrl('/sys/pconfig/save'),
        method: 'post',
        data: this.$http.adornData({
          'paramKey': 'SERVICE_POLICY_CONFIG_CN',
          'paramValue': JSON.stringify(this.policyFormCn),
          'remark': this.$t('sysManagement.privacyPolicyCnConfig')
        })
      }).then(({ data }) => {
        if (data) {
          this.init()
        }
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 1500
        })
      })
    }
  },
  components: {
    TinyMce
  }
}
</script>
<style lang="scss">
</style>
